// create by zhangguangde
// 评论页面

import React from 'react';
import {
    Link,
    // Route,
    // Switch
} from 'react-router-dom';

import { Router } from './../../../config/router.js'
import { getPath } from './../../../utils/utils.js';
import CommentSelecter from './../components/commentSelecter/CommentSelecter.js';
import CommentItem from './../components/commentItem/CommentItem.js';

import ProductModule from './product.module.scss';

class Product extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            merchantObj: [
                {
                    merchantName: '我是店名1',
                    merchantId: 1
                },
                {
                    merchantName: '我是店名2',
                    merchantId: 2
                },
                {
                    merchantName: '我是店名3',
                    merchantId: 3
                },
            ],
            scoreObj: {
                synthesis: 3.9,
                consumption: 17.25,
                experience: 3.6,
                environment: 3.4,
                service: 3.5
            },
            commentTypeList: [
                {
                    commentTypeName: '全部评论',
                    commentTypeId: 0
                },
                {
                    commentTypeName: '好评',
                    commentTypeId: 1
                },
                {
                    commentTypeName: '中评',
                    commentTypeId: 2
                },
                {
                    commentTypeName: '差评',
                    commentTypeId: 3
                }
            ],
            replyTypeList: [
                {
                    replyTypeName: '全部状态',
                    replyTypeId: 0
                },
                {
                    replyTypeName: '已回复',
                    replyTypeId: 1
                },
                {
                    replyTypeName: '未回复',
                    replyTypeId: 2
                }
            ],
            commentList: []
        };
    }
    componentDidMount() {
        console.log(this)
        // 
        // const data = getData('/api/merchant/outlet/list', null);
        // console.log(data);
        // 获取当前筛选条件评论
        this.getComment();
    }

    /**
    * 获取评论
    */
    getComment = () =>  {
        // 获取店铺id
        // console.log('店铺id', this.merchantSelecter.state.merchantId);
        // 获取评论类型
        // console.log('评论类型id', this.commentSelecter.state.commentTypeId);
        // 获取恢复状态
        // console.log('恢复状态id', this.commentSelecter.state.replyTypeId);
        // 渲染评论内容
        this.setState({
            commentList: [
                {   
                    commentId: '0',
                    userName: '我是用户名',
                    commentTime: '2018-07-04 11:31:57',
                    score: 1,
                    commentContent: '我是评论内容0',
                    replyContent: ''
                },
                {
                    commentId: '1',
                    userName: '我是用户名',
                    commentTime: '2018-07-04 11:31:57',
                    score: 2,
                    commentContent: '我是评论内容1',
                    replyContent: '我是回复内容'
                },
                {
                    commentId: '2',
                    userName: '我是用户名',
                    commentTime: '2018-07-04 11:31:57',
                    score: 3.6,
                    commentContent: '我是评论内容2',
                    replyContent: '我是回复内容'
                },
                {
                    commentId: '3',
                    userName: '我是用户名',
                    commentTime: '2018-07-04 11:31:57',
                    score: 3.6,
                    commentContent: '我是评论内容3',
                    replyContent: ''
                }
            ]
        }, function() {
        });
    }

    
    render() {

        return (
            <div className={ProductModule.Product}>
                <header>
                <Link to={getPath(Router.client.comment.merchant.path)}>商户评价</Link>
                <Link to={getPath(Router.client.comment.product.path)}>商品评价</Link>
                </header>

                {/*评论类型选择*/}
                <CommentSelecter ref={(e) => { this.commentSelecter = e; }} getComment={this.getComment} commentTypeList={this.state.commentTypeList} replyTypeList={this.state.replyTypeList} />
                {/*评论部份*/}
                {
                    /* 循环评论类型列表 */
                    this.state.commentList.map((item) =>
                        <CommentItem key={item.commentId} commentInfo={item} />
                    )
                }

            </div>
        );
    }
}

export default Product;
